<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件分类</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="wrapper" style="width:100px;height:100px ;background-color: red;
		margin-top:50px;margin-left:10px;">
		<div class="box" style="
		position: fixed;margin-top:2px;margin-left:2px;
		width:50px;height:50px ;background-color: orange;"></div>
		
		</div>
		<script type="text/javascript">
			var wrapper = document.getElementsByClassName("wrapper")[0];
			var box = document.getElementsByClassName("box")[0];
			/* IE是window.event，其他e */
			/* 按下wrapper */
			var disX,disY;
			box.onmousedown = function(e) {
				/* 记录位置 */
				let event = e || window.event;
				disX=event.pageX-parseInt(box.style.marginLeft);
				disY=event.pageY-parseInt(box.style.marginTop);;
				/* 悬浮移动 */
				document.onmousemove = function(e) {
					let event = e || window.event;
					console.log(event.pageX + "--" + event.pageY)
					box.style.marginLeft = event.pageX-disX+ "px";
					box.style.marginTop = event.pageY -disY+ "px";
				}
				document.onmoseup=function(){
					box.onmousemove=null; 
				}
			}
		</script>
	</body>
</html>
